<template>
    <div class="com_echarts">
        <div class="chart-title">
            <img src="../../../assets/images/screen/health_resource/FilletRectangle.png" alt="">
            <p>医疗卫生机构出院人数</p>
        </div>
        <div class="right_top_three_bar" id="right_top_three_bar">
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'right_top_three_bar',
  data () {
    return {
        id:"right_top_three_bar"
    }
  },
  created () {

  },
  mounted(){
      this.initMap();
  },
  methods:{
    initMap(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
        var category = ['2010年','2018年','2018年','2018年','2018年','2018年','2018年'];
        var lineData = [55,56,76,88,67,98,50,70,75,85];
        var barData = [34,43,45,42,25,36,37,46,48,49];

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                },
                formatter:'{b}<br/>{a}:{c}<br/>{a1}:{c1}'
            },
            legend: {
                data: ['总计', '医院'],
                textStyle: {
                    color: '#ccc'
                }
            },
            grid: {
                show:true,
                top:'13%',
                left: '4%',
                right: '4%',
                bottom: '8%',
                containLabel: true,
                borderColor:'#296C89',
                borderWidth:1,
            },
            xAxis: {
                // offset: 20,
                data: ['2010年','2011年','2012年','2013年','2014年','2015年','2016年','2017年'],
                axisLine: {
                    show: true,
                    lineStyle:{
                    color:'#4EB5D6',
                    type:'solid',
                    width:1
                    }
                },
                axisTick: {
                    show: false
                },
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#bacbe7'
                    },
                    // margin:4,
                    interval: 'auto',
                    // formatter: '{value} '
                }
            },
            yAxis: {
                splitLine: {show: false},
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                    color: '#bacbe7'
                    }
                },
                splitLine: {
                    lineStyle: {
                    color: '#39517D'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle:{
                    color:'#4EB5D6',
                    type:'solid',
                    width:1
                    }
                },
                axisTick:{
                    show:false
                }
            },
            series: [{
                name: '总计',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 8,
                data: lineData
            }, {
                name: '医院',
                type: 'bar',
                barWidth: 8,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#14c8d4'},
                                {offset: 1, color: '#43eec6'}
                            ]
                        )
                    }
                },
                data: barData
            }, {
                name: '总计',
                type: 'bar',
                barGap: '-100%',
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(20,200,212,0.5)'},
                                {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                                {offset: 1, color: 'rgba(20,200,212,0)'}
                            ]
                        )
                    }
                },
                z: -12,
                data: lineData
            }, {
                name: 'dotted',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    normal: {
                        color: '#0f375f'
                    }
                },
                symbolRepeat: true,
                symbolSize: [10, 4],
                symbolMargin: 4,
                z: -10,
                data: lineData
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    randomData() {
        return Math.round(Math.random()*1000);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:99%;
    height:100%;
    float: left;
}
.chart-title{
    img{
        float: left;
        width: 6px;
        height: auto;
        margin-left: 5px;
        margin-top: 5px;
    }
    p{
        font-size: 12px;
        color: #58ADE3;
        line-height: 2.5;
        margin-left: 15px;
    }
}
.right_top_three_bar {
    width:99%;
    height:86%;
    float: left;
}

</style>
